<template>
  <div class="delivery-way">
    <top-navbar title="地址管理" />
    <!-- 配送上门 -->
    <div class="mt-32rpx box-border px-32rpx">
      <!-- 输入框 -->
      <div class="mt-44rpx flex justify-center">
        <div class="mt-20rpx w-686rpx text-28rpx text-32rpx font-600 text-hex-333">
          可供选货地址
        </div>
      </div>
      <!-- 地址列表 -->
      <div class="mt-12rpx pb-182rpx">
        <uni-swipe-action v-if="address.listData.length>0">
          <uni-swipe-action-item
            v-for="(item, index) in address.listData"
            :key="index"
            :right-options="options2"
            @change="swipeChange($event, index)"
            @click="swipeClick($event, index, item)"
          >
            <view class="content-box" @click="address.updateSelectData(item)">
              <div class="flex justify-center">
                <div class="w-686rpx flex justify-between border-2rpx border-transparent border-b-hex-f5f5f5 border-solid py-40rpx">
                  <div>
                    <div class="flex text-28rpx text-hex-333">
                      <div class="flex">
                        <div v-if="item.isDefault===1" class="mr-12rpx flex items-center rounded-6rpx bg-hex-ABCD03 px-10rpx py-4rpx text-center text-24rpx text-hex-fff">
                          默认</div>
                        <div class="mr-12rpx flex items-center border-1rpx border-hex-ABCD03 rounded-6rpx border-solid bg-hex-EDFDF8 px-9rpx py-3rpx text-center text-24rpx text-hex-ABCD03">
                          {{ item.alias }}</div>
                        <div class="mr-12rpx text-hex-7C8699">{{ item.address }}</div>
                      </div>
                    </div>
                    <div class="w-600rpx flex justify-between py-22rpx text-26rpx font-400 text-hex-333">
                      <div>{{ item.detail }}</div>
                      <div class="h-32rpx w-2rpx bg-hex-DDE2E0" />
                    </div>
                    <div class="flex border-2rpx border-transparent text-26rpx font-400 text-hex-333">
                      <div>{{ item.name }}({{ item.gender===0?'女士':'先生' }})<text class="ml-24rpx">{{ item.mobile }}</text></div>
                    </div>
                  </div>
                  <div class="flex items-center" @click.stop="edit(item)">
                    <image
                      :src="`${cdnUrl}/svgicons/tea/edit.svg${imgVersion}`"
                      mode="scaleToFill"
                      class="h-40rpx w-40rpx"
                    />
                  </div>
                </div>
              </div>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
        <div v-else>
          <div
            class="mt-200rpx flex items-center justify-center">
            <div>
              <image
                class="h-364rpx w-364rpx"
                :src="`${cdnUrl1}/imgs/xy/other/noneeattention.png${imgVersion}`"
                mode="scaleToFill"
              />
              <div class="text-center text-28rpx text-hex-7C8699">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="fixed bottom-0 left-32rpx right-32rpx h-182rpx flex items-center justify-center bg-[rgba(255,255,255)]"
        @click="navTo('/pages-tea/addAddress')">
        <div class="h-76rpx w-100% border-2rpx border-hex-ABCD03 rounded-12rpx border-solid text-center text-28rpx leading-76rpx text-hex-ABCD03">添加地址</div>
      </div>
    </div>
    <!-- 删除弹窗 -->
    <confirm ref="delpop" />
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user'
import { useAddressStore } from '@/stores/address'

const { user } = useUserStore()
const address: any = useAddressStore()
let searchBarTop: any = $ref('24')
let dataList: any = $ref([])
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
//编辑地址
const edit = (item) => navTo(`/pages-tea/addAddress?edit=1&id=${item.id}`)
let options2: any = $ref([{
  text: '取消',
  style: {
    backgroundColor: '#007aff',
  },
},
{
  text: '删除',
  style: {
    backgroundColor: '#F56C6C',
  },
},
])
const bindClick = () => {}
const swipeChange = (e, index) => {
  // console.log('返回：', e)
  // console.log('当前索引：', index)
}
// 删除弹窗
const delpop: any = $ref('')
const swipeClick = (e, index, item) => {
  let {
    content,
  } = e
  if (content.text === '删除') {
    delpop.showConfirm('确定删除这条地址吗?').then((res) => {
      if (res) {
        address.delListData(user.id, item.id)
      }
    })
  }
}
let pageNo = $ref(1)
let listtotalPage = $ref()
//下滑加载更多数据
const getMoreData = () => {
  if (listtotalPage !== pageNo) {
    pageNo++
    address.getListData(user.id, pageNo, 10)
  }
}
onReachBottom(() => {
  getMoreData()
})
onMounted(() => {
  listtotalPage = address.getListData(user.id, pageNo, 10)
})

</script>

<style lang="scss">
.delivery-way{
  .triangle {
    width: 0;
    height: 0;
    border-left: 12rpx solid #000;
    border-top: 12rpx solid transparent;
    border-bottom:12rpx solid transparent;
  }
}
</style>
